<template>
  <div ref="wrapperRef" class="scroll-wrapper w-full h-full overflow-hidden overflow-y-scroll touch-pan-y">
    <slot></slot>
  </div>
</template>
<script setup lang="ts" generic="T">
import {onMounted, onUnmounted, ref, nextTick} from 'vue';
import BScroll from 'better-scroll';

defineOptions({
  name: 'ListScroll',
})

interface IProps {
  /**
   * 1 滚动的时候会派发scroll事件，会截流。
   * 2 滚动的时候实时派发scroll事件，不会截流。
   * 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
   */
  probeType?: number,
  // 点击列表是否派发click事件
  click?: boolean,
  // 是否开启横向滚动
  scrollX?: boolean,
}

const props = withDefaults(defineProps<IProps>(), {
  probeType: 3,
  click: true,
  scrollX: false,
})

const wrapperRef = ref<HTMLElement | null>(null);
const bs = ref<BScroll | null>(null);

const initScroll = () => {
  bs.value = new BScroll(wrapperRef.value!, {
    probeType: props.probeType,
    click: props.click,
    scrollX: props.scrollX,
  })
}

onMounted(async () => {
  await nextTick()
  initScroll();
})

onUnmounted(() => {
  bs.value?.destroy();
})
</script>